<template>

	<view class="padding-32">
		<page-container :overlay="false" :show="isShowPage" @beforeleave="beforeleave"
			custom-style="height:100vh;overflow:scroll">
			<view class="width-152 height-152" style="margin:0 auto;margin-top: 100rpx;">
				<image src="../../static/finish.png" mode="" style="width: 100%; height: 100%;"></image>
			</view>
			<view class="marginTop-40 weight-700 text-center fontSize-36 color-333">
				故事编写完成
			</view>
			<view class="marginTop-40 text-center fontSize-26 color-666 padding-30 " style="width: 678rpx;">
				我们已根据它们在故事中出现的顺序，在家里排好了位置，<text style="color:#51D580;"
					@click="goDetail()">点击查看位置。</text>并将故事转成中英文故事咯，快看一下吧！
			</view>
			<view class="marginTop-324 borderRadius-20 padding-30 story-item"
				style="background-color: #f5f5f5;overflow: hidden;width: 630rpx;">
				<view class="" style="border-bottom: 1px solid #e0e0e0;">
					<view class="marginLeft-30 marginTop-24 weight-700 fontSize-32">
						你的故事值得被分享！
					</view>
					<view class="padding-30 box-sizing fontSize-26 color-666">
						{{english_story}}
					</view>
				</view>

				<button open-type="share">
					<view class="color-51D580 text-center weight-700 fontSize-30" style="padding: 30rpx 0;">
						分享
					</view>

				</button>


			</view>
			<view class="btn">
				<view class="flex flex-center items-center">
					<image src="../../static/alarm-icon.png" mode="" style="width: 32rpx; height: 32rpx;"></image>
					<view class="marginLeft-12 color-999 fontSize-24">
						抄一遍，相当于看十遍
					</view>
				</view>
				<view
					class="width-702 height-104 borderRadius-92 colorBj-51D580 color-white text-center marginTop-24 fontSize-32"
					style="line-height: 104rpx;" @click='btnClick'>
					准备好纸笔，去抄写
				</view>
			</view>
			<up-popup :show="detailShow" mode='center' bgColor='transparent'>
				<view class="box">
					<view class="flex box_head u-flex-between">
						<view class="box_head_title">
							门牌号{{big_sort}}-{{small_sort}}
						</view>
						<view class="box_head_name">
							{{familyname}}
						</view>
					</view>
					<view class="box_lists flex u-flex-between ">
						<view class="left">
							<view class="box_list" v-for="(i,v) in oneWord" :key="v">
								<view class="b_l_name u-line-1">
									{{i.xh}}.{{i.wordHead}}
								</view>

							</view>
						</view>
						<view class="right">
							<view class="box_list" v-for="(i,v) in twoWord" :key="v">
								<view class="b_l_name u-line-1">
									{{i.xh}}.{{i.wordHead}}
								</view>

							</view>
						</view>
					</view>
					<view
						class="width-500 height-104 borderRadius-92 colorBj-51D580 color-white text-center fontSize-32"
						style="line-height: 104rpx;margin: 0 auto;margin-top: 200rpx;" @click='detailShow = false'>
						知道了
					</view>
				</view>
			</up-popup>
		</page-container>
		<up-popup :show="show" mode='center' bgColor='transparent'>
			<view class="popup_bg">
				<view class="popup_title">
					温馨提示
				</view>
				<view class="popup_pro">
					坚持就是胜利！若您要坚持退出 下次记忆将接着此次记录继续
				</view>
				<view class="flex u-flex-between padding-30 marginTop-15">
					<view class="popup_cancel" @click="cancel">
						退出
					</view>
					<view class="popup_sure" @click="confirm">
						继续学习
					</view>
				</view>
			</view>
		</up-popup>


	</view>
</template>

<script setup>
	import {
		ref,
		inject,
		onMounted,
		reactive
	} from 'vue';
	import {
		onLoad,
		onUnload,
		onShareAppMessage
	} from '@dcloudio/uni-app';
	const english_story = ref('')
	const page = ref(1)
	const big_sort = ref(1)
	const small_sort = ref(1)
	const show = ref(false)
	const isShowPage = ref(true)
	const detailShow = ref(false)
	const user_id = ref('')
	const oneWord = ref([])
	const twoWord = ref([])
	const familyname = ref('')
	const resultWordListApi = inject('resultWordList')

	onLoad((op) => {
		english_story.value = op.english_story
		page.value = op.page
		small_sort.value = op.small_sort
		big_sort.value = op.big_sort
		user_id.value = uni.getStorageSync('userInfo').user_id
		resultWordListApi({
			page: page.value,
			small_sort: small_sort.value,
			big_sort: big_sort.value
		}).then(res => {
			console.log(res, 106)
			oneWord.value = res.oneWord
			twoWord.value = res.twoWord
			familyname.value = res.familyname
		})

	})
	onShareAppMessage((res) => {
		if (res.from === 'button') { // 来自页面内分享按钮
			console.log(res.target)
		}
		return {
			title: '我在百霸智育学英语，在这里不知不觉中单词都记住了，你也来试试吧！',
			content: '我在百霸智育学英语，在这里不知不觉中单词都记住了，你也来试试吧！',
			path: '/pagesA/reciteWords/wordDetail?page=' + page.value + '&small_sort=' + small_sort.value +
				'&big_sort=' + big_sort.value + '&user_id=' + user_id.value,
			imageUrl: 'http://bbsf.oss-cn-shanghai.aliyuncs.com/english/icons/shareBj.png'
		}
	})
	const value1 = ref('')
	const btnClick = () => {
		uni.redirectTo({
			url: '/pagesA/reciteWords/uploadWord?page=' + page.value + '&small_sort=' + small_sort.value +
				'&big_sort=' + big_sort.value
		})
	}
	const goDetail = () => {
		detailShow.value = true

	}

	// 离开出现的弹窗
	const beforeleave = (e) => {
		isShowPage.value = false
		show.value = true
	}
	const cancel = () => {
		uni.navigateBack()
	}
	const confirm = () => {
		isShowPage.value = true
		show.value = false
	}
</script>

<style scoped lang="scss">
	.btn {
		position: fixed;
		bottom: 40rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.popup_bg {
		width: 610rpx;
		height: 500rpx;
		background: url('https://bbsf.oss-cn-shanghai.aliyuncs.com/english/icons/remind.png') no-repeat;
		background-size: 100% 100%;

		.popup_title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 52rpx;
			color: #FFFFFF;
			text-align: center;
			padding-top: 20rpx;
		}

		.popup_pro {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			color: #333333;
			line-height: 42rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
			width: 504rpx;
			height: 100rpx;
			margin: 120rpx auto 0;
		}

		.popup_cancel {
			width: 252rpx;
			height: 92rpx;
			background: #CCCCCC;
			border-radius: 74rpx 74rpx 74rpx 74rpx;
			text-align: center;
			line-height: 92rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 32rpx;
			color: #FFFFFF;
		}

		.popup_sure {
			width: 252rpx;
			height: 92rpx;
			background: #51D580;
			border-radius: 74rpx 74rpx 74rpx 74rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 92rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}

		.popup_see {
			width: 526rpx;
			height: 92rpx;
			background: #51D580;
			border-radius: 74rpx 74rpx 74rpx 74rpx;
			text-align: center;
			line-height: 92rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 92rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}

	}

	.story-item {
		margin: 324rpx auto 0;
	}

	.box {
		width: 710rpx;
		height: 1040rpx;
		background: #F4FFF8;
		margin: 40rpx auto;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		border: 12rpx solid #51D580;

		.box_head {
			padding: 30rpx 40rpx;

			.box_head_title {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #666666;
			}

			.box_head_name {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #666666;
			}
		}

		.box_lists {
			// padding: 0 104rpx;
			margin-top: 40rpx;

			.left,
			.right {
				width: 50%;
				padding-right: 10rpx;
			}

			.left {
				margin-left: 140rpx;

			}

			.box_list {
				margin-bottom: 80rpx;
				padding: 10rpx;

				// width: 50%;
				.b_l_name {
					font-family: PingFang SC, PingFang SC;
					font-weight: 800;
					font-size: 30rpx;
					color: #333333;
				}

				.b_l_pro {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #666666;
				}
			}

			.hover {
				border: 4rpx solid #51D580;
				border-radius: 30rpx;
			}
		}

	}

	.pos {
		position: fixed;
		bottom: 36rpx;
		left: 24rpx;

		.warn {
			margin-bottom: 24rpx;

			.warn_img {
				width: 32rpx;
				height: 32rpx;
				margin-right: 4rpx;
			}

			.warn_title {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #999999;

				text {
					color: #DF2828;
				}
			}

		}

		.btn {
			width: 702rpx;
			height: 104rpx;
			background: #51D580;
			border-radius: 92rpx 92rpx 92rpx 92rpx;
			line-height: 104rpx;
			text-align: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
		}
	}

	@media (max-height: 800px) {
		.box {
			height: 850rpx;

		}
	}




	@media (max-height: 800px) {
		.story-item {
			margin: 100rpx auto 0;
		}
	}
</style>